<template>
	<view class="container">
	<div class="content">
	
		<div class='toolbar' @tap="format">
			<div :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></div>
			<div :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></div>
			<div :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></div>
			<div :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></div>
			<div :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align"
			 data-value="left"></div>
			<div :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align"
			 data-value="center"></div>
	
			<div class="iconfont icon-fengexian" @tap="insertdivider"></div>
			<div class="iconfont icon-charutupian" @tap="insertimage"></div>
			<div :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header"
			 :data-value="1"></div>
			<div :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script"
			 data-value="sub"></div>
			<div :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script"
			 data-value="super"></div>
			<div class="iconfont icon-shanchu" @tap="clear"></div>
			<div :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl" data-name="direction"
			 data-value="rtl"></div>
		</div>
	
		<div class=".uni-form-item uni-column">
			<input class="my-uni-input" maxlength="20" placeholder="标题" @input="settitle" />
		</div>
		
		<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="oneditorready" @statuschange="onstatuschange"></editor>
	</div>
	
	
	
	


	</view>
</template>

<script>
	export default {
		name:"EditorPannel",
		data() {
			return {
				formats: {},
				timer: null,
				editorDetail: "",
			}
		},
		mounted() {
			this.onEditorReady();
			// 将数据渲染到富文本内
			this.timer = setInterval(() => {
				if (this.editorDetail) {
					clearInterval(this.timer)
					this.editorCtx.setContents({
						html: this.editorDetail,
						success(res) {
							// console.log(res);
						}
					})
				}
			}, 100)
		},
		methods: {
			//撤销、重做这些不需要可以不写
			undo() {
				this.editorCtx.undo()
			},
			
			redo() {
				this.editorCtx.redo()
			},
			
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				// console.log('format', name, value)
				this.editorCtx.format(name, value)
			},
			
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			
			insertImage() {
				var that = this;
				uni.chooseImage({ 
					sizeType: ['original', 'compressed'], 
					sourceType: ['album', 'camera'], 
					success(res) { 
						console.log(res.tempFilePaths[0])
						uni.uploadFile({   
							url: 'http://0.0.0.0/file/upload-img', //域名+上传文件的请求接口 (根据你实际的接口来)       
							filePath: res.tempFilePaths[0], // tempFilePath可以作为img标签的src属性显示图片 服务器图片的路径         
							name: 'img', //上传到服务器的参数，自定义
							header: {
								"Content-Type": "multipart/form-data"
							},          
							success(res) {
								var data = JSON.parse(res.data)
								that.editorCtx.insertImage({
									width: '100%', //设置宽度为100%防止宽度溢出手机屏幕
									height: 'auto',
									src: data.url, //服务端返回的url
									alt: '图像',
									success: function() {
										console.log('insert image success')
									}
								})
								console.log(that.editorCtx)
							}
						})
					}
				})
			},
			
			//发表文章
			publish_article() {
				var that = this;
				//获取编辑器内容后，调用你自己的服务器接口
				that.editorCtx.getContents({
					success: function(data) {
						let obj = { // 创建对象
							url: 'article/save', //
							method: "post",
							data: {
								id: that.id,
								content: data.html,
								title: that.title
							},
							success: (res) => {
								console.log(res)
								wx.showToast({
									title: '发表成功',
									icon: 'success',
									duration: 2000,
									success: function() {
										const url = "index";
										console.log(url)
										uni.redirectTo({
											url: url
										});
									}
								})
							}
						}
						that.$apiRequest.post(obj); // 调用你自己的发表文章接口
					}
				})
			}
		}

				
			
		
	}
</script>

<style>
	.ql-container {
		box-sizing: border-box;
		padding: 12px 15px;
		width: 100%;
		min-height: 30vh;
		height: auto;
		background: #fff;
		font-size: 16px;
		line-height: 1.5;
	}
	
	.ql-active {
		color: #06c;
	}
	
	.iconfont {
			display: inline-block;
			padding: 8px 8px;
			width: 24px;
			height: 24px;
			cursor: pointer;
			font-size: 20px;
	}
		
	.toolbar {
		box-sizing: border-box;
		border-bottom: 0;
		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	}

	/* @import "./css/editor.css"; */
	.wrapper {
		padding: 5px;
	}

	.iconfont {
		display: inline-block;
		padding: 10px 8px;
		width: 24px;
		height: 24px;
		cursor: pointer;
		font-size: 20px;
	}

	.toolbar {
		box-sizing: border-box;
		border-bottom: 0;
		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
		background-color: #ffffff;
		position: -webkit-sticky;
		position: sticky;
		top: var(--window-top);
		z-index: 99;
		height: 95px;
	}

	.ql-container {
		box-sizing: border-box;
		padding: 12px 15px;
		width: 100%;
		min-height: 30vh;
		height: auto;
		background: #fff;
		margin-top: 10px;
		font-size: 16px;
		line-height: 1.5;
	}

	.ql-active {
		color: #06c;
	}
</style>

